<template>
  <div>
    <div class="balance">
      <div>当前余额</div>
      <div class="value">{{ $store.state.user.money }}</div>
    </div>

    <div class="balance-top-up">
      <div class="left"></div>
      <div class="title">选择充值金额 - - - - - - - - - -</div>
    </div>

    <div class="select-number">
      <div class="btns">
        <el-button
          plain
          size="small"
          v-for="item in quotaList"
          :key="item.id"
          :class="item.id === activeId ? 'active' : ''"
          @click="selectQuotaValue(item)"
          >{{ item.price }}</el-button
        >
      </div>
    </div>

    <div class="balance-pay-way">
      <div class="left"></div>
      <div class="title">选择支付方式 - - - - - - - - - -</div>
    </div>

    <div class="select-pay-way">
      <div
        class="zhifubao"
        :class="{ active: state == '1' }"
        @click="state = '1'"
      >
        <img src="../../assets/personalCenter/xufei_zhifubao.png" alt="" />
      </div>
      <div
        class="weixin"
        :class="{ active: state == '2' }"
        @click="state = '2'"
      >
        <img src="../../assets/personalCenter/xufei_weixin.png" alt="" />
      </div>
    </div>

    <div>
      充值
      <span class="value">{{ `${quota}` }}</span>
      元
    </div>

    <div style="margin: 10px 0">
      <span style="color: red; margin: 0px 10px 0px 1rem"> *同意</span>
      <el-checkbox v-model="checked">
        账户余额可用来购买分发次数，企业签名、tf签名等服务。目前暂时不支持余额提现功能。
      </el-checkbox>
      <span> </span>
    </div>

    <el-button style="margin: 40px 0; width: 100px" plain @click="recharge"
      >充值</el-button
    >

    <el-dialog
      title="请支付订单"
      :visible.sync="innerVisible"
      append-to-body
      width="15%"
    >
      <canvas ref="qrcodeCanvas"></canvas>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { price } from '@/api';
import { order_create, order_result } from '@/api/person';
import QRcode from 'qrcode';

export default {
  watch: {
    innerVisible(value) {
      if (!value) {
        this.timer && clearInterval(this.timer);
      }
    }
  },
  data() {
    return {
      innerVisible: false,
      state: '1',
      quotaList: [],
      activeId: '',
      quota: '',
      checked: false,
      timer: null
    };
  },
  async mounted() {
    const res = await price({ type: '0' });
    this.quotaList = res.data;
  },
  methods: {
    insertAlipayForm(HTML) {
      // 创建一个div元素，将后端返回的支付表单HTML插入其中
      const container = document.createElement('div');

      container.innerHTML = HTML;

      // 将div元素添加到页面中
      document.body.appendChild(container);

      // 提交表单
      document.forms['alipaysubmit'].submit();

      // 移除div元素
      document.body.removeChild(container);
    },
    pollding(pay_type, pay_id, res) {
      if (pay_type == '2') {
        this.innerVisible = true;
        this.$nextTick(() => {
          QRcode.toCanvas(this.$refs.qrcodeCanvas, res.data.code_url, {
            with: 200,
            color: {
              bark: '#000',
              light: '#ffff'
            }
          });
        });

        this.timer = setInterval(async () => {
          this.num++;
          if (this.num > 20) {
            this.$message.warning('支付超时'), (this.num = 0);
            this.innerVisible = false;
            clearInterval(this.timer);
            return;
          }
          const res = await order_result({ pay_id });
          if (res.data !== '未支付') {
            this.$router.push('/');
          }
        }, 3000);
      } else if (pay_type == '1') {
        this.insertAlipayForm(res.data.code_url);
      }
    },
    recharge() {
      if (!this.activeId) return this.$message.warning('请选择价格');
      if (!this.checked) return this.$message.warning('请勾选同意信息');
      order_create({ id: this.activeId, pay_type: this.state }).then((res) => {
        this.pollding(this.state, res.data.order.pay_id, res);
      });
    },
    selectQuotaValue(item) {
      this.activeId = item.id;
      this.quota = item.price;
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped lang="scss">
.value {
  color: red;
  font-size: 20px;
  margin: 5px 0;
}

.balance-top-up,
.balance-pay-way {
  height: 25px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 15px;
  .left {
    height: 100%;
    width: 6px;
    margin-right: 15px;
    background-color: #4d92f7;
    border-radius: 3px;
  }

  .title {
    color: #4d92f7;
  }
}

.select-number {
  margin-left: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;

  .btns {
    .active {
      background: #fff;
      border-color: #409eff;
      color: #409eff;
    }
  }

  .customize {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .label {
      width: 20%;
      min-width: 60px;
      max-width: 80px;
      font-weight: 700;
    }

    ::v-deep .el-input__inner {
      height: 32px;
      width: 70%;
    }
  }
}

.select-pay-way {
  display: flex;
  margin-bottom: 15px;
  .zhifubao {
    margin-right: 20px;
  }
  > * {
    border: 1px solid #ddd;
  }

  .active {
    border: 1px solid #4d92f7;
  }
}
</style>
